<template>
	<div class="wrapper">
		<img src="../../assets/user.jpg" class="wrapper_img">
		<div class="wrapper_input">
			<input type="text" class="wrapper_input_content" placeholder="请输入手机号" v-model="data.username">
		</div>
		<div class="wrapper_input">
			<input type="password" class="wrapper_input_content" placeholder="请输入密码" v-model="data.password">
		</div>
		<div class="wrapper_login-button" @click="handleLogin">登录</div>
		<div class="wrapper_login-link" @click="handleRegisterClick">注册</div>
		<Toast v-if="data.showToast" :message='data.toastMessage' />
	</div>
</template>

<script>
	import Toast from '../../components/Toast.vue'
	import { useStore } from 'vuex'
	import {
		useRouter
	} from 'vue-router'
	import {
		reactive
	} from 'vue'
	import {
		get,post
	} from '../../utils/request.js'
	export default {
		name: 'Login',
		components: {
			Toast
		},
		setup() {
			const router = useRouter();
			const store = useStore();
			// 初始化数据
			// 创建proxy对象,通过劫持对象的 get 和 set 方法实现了对象的双向数据绑定
			const data = reactive({
				username: '',
				password: '',
				showToast: false,
				toastMessage: ''
			})
			// 定义错误弹框方法
			const errMessage = (err) => {
					data.showToast = true
					data.toastMessage = err
					setTimeout(() => {
						data.showToast = false
						data.toastMessage = ''
					}, 2000)
				}
			// 登录事件处理,异步
			const handleLogin = async () => {
				try {
					// 将表单中的数据用post方法提交到对应接口上
					const result = await get('/api/login', {
						username: data.username,
						password: data.password
					})
					console.log(result)
					if(result?.errno === 1){
						errMessage(result?.message)
					}

					if(result?.errno === 0){
						localStorage.userInfo = JSON.stringify(result.data)
						localStorage.isLogin = true
						router.push({name: 'Home'})
					}
					// // 返回集errno恒等于0路由跳转
					// if (result?.errno === 0) {
					// 	const datas = store.state.user
					// 	let username = data.username
					// 	let password = data.password
					// 	for(let i in datas)
					// 	{
					// 		if(username == datas[i].username && password == datas[i].password)
					// 		{
					// 			data.showToast = true
					// 			data.toastMessage = '登录成功，正在跳转'
					// 			setTimeout(() => {
					// 				data.showToast = false
					// 				data.toastMessage = ''
					// 				localStorage.isLogin = true;
					// 				router.push({
					// 					name: 'Home'
					// 				})
					// 			}, 2000)
								
					// 		}else{
					// 			data.showToast = true
					// 			data.toastMessage = '请检查账号密码后重试'
					// 			setTimeout(() => {
					// 				data.showToast = false
					// 				data.toastMessage = ''
					// 			}, 2000)
					// 		}
					// 	}
							
					// } else {
					// 	// 弹出错误信息
					// 	data.showToast = true
					// 	data.toastMessage = '登陆失败'
					// 	setTimeout(() => {
					// 		data.showToast = false
					// 		data.toastMessage = ''
					// 	}, 2000)
					// }
				} catch (e) {
					alert('连接失败'+e)
				}
			}
			// 注册页面跳转
			const handleRegisterClick = () => {
				router.push({
					name: 'Register'
				})
			}
			return {
				handleLogin,
				handleRegisterClick,
				data
			}

		}
	}
</script>

<style lang="scss" scoped>
	.wrapper {
		position: absolute;
		top: 40%;
		left: 0;
		right: 0;
		transform: translateY(-50%);

		&_img {
			display: block;
			margin: 0 auto .4rem auto;
			width: .66rem;
			height: .66rem;
		}

		&_input {
			height: .48rem;
			margin: 0 .4rem .16rem .4rem;
			padding: 0 .16rem;
			background: #F9F9F9;
			border: 1px solid rgba(0, 0, 0, 0.1);
			border-radius: 6px;

			&_content {
				line-height: .48rem;
				border: none;
				outline: none;
				width: 100%;
				background: none;
				font-size: .16rem;
				color: #777;

				&::placeholder {
					color: #777;
				}
			}
		}

		&_login-button {
			margin: .32rem .4rem .16rem .4rem;
			line-height: .48rem;
			background: #0091FF;
			box-shadow: 0 .04rem .08rem 0 rgba(0, 145, 255, 0.32);
			border-radius: .04rem;
			color: #fff;
			font-size: .16rem;
			text-align: center;
		}

		&_login-link {
			font-size: .14rem;
			text-align: center;
			color: #777;
		}
	}
</style>
